<!-- 主模板结构 -->
<template>
  <!-- 定义主页容器，包含导航栏、头部搜索框和主要内容区域 -->
  <div class="home-container">
    <!-- 主导航栏，包含首页、登录和购物车的导航链接 -->
    <nav class="main-nav">
      <!-- 导航链接：跳转到首页 -->
      <RouterLink to="/" class="nav-button">首页</RouterLink>
      <!-- 导航链接：跳转到登录页面 -->
      <RouterLink to="/login" class="nav-button">登录</RouterLink>
      <!-- 导航链接：跳转到购物车页面 -->
      <RouterLink to="/cart" class="nav-button">购物车</RouterLink>
    </nav>
    <!-- 顶部导航栏 -->
    <header class="header">
      <!-- 页面标题 -->
      <h1>OldPhoneDeals</h1>
      <!-- 搜索框区域 -->
      <div class="search-bar">
        <!-- 输入框，绑定搜索关键词，支持回车键触发搜索 -->
        <input 
          v-model="searchQuery" 
          placeholder="搜索手机..."
          @keyup.enter="handleSearch"
        />
        <!-- 搜索按钮，点击触发搜索 -->
        <button @click="handleSearch">搜索</button>
      </div>

    </header>

    <!-- 内容区域 - 根据状态切换 -->
    <main class="main-content">
      <!-- 首页状态：显示即将售罄和畅销商品 -->
      <div v-if="currentState === 'home'" class="home-state">
        <!-- 即将售罄商品板块 -->
        <section class="section">
          <h2>即将售罄</h2>
          <!-- 手机列表容器 -->
          <div class="phone-list">
            <!-- 遍历库存最少的前5个手机，生成商品卡片 -->
            <div 
              v-for="phone in phones.slice().sort((a,b) => a.stock - b.stock).slice(0,5)" 
              :key="phone.id"
              class="phone-card"
              @click="showPhoneDetail(phone.id)"
            >
              <!-- 手机图片 -->
              <img :src="phone.image" :alt="phone.model" />
              <!-- 手机型号 -->
              <h3>{{ phone.model }}</h3>
              <!-- 手机价格 -->
              <p>价格: ¥{{ phone.price }}</p>
              <!-- 手机成色 -->
              <p>成色: {{ phone.condition }}</p>
            </div>
          </div>
        </section>
        <!-- 畅销商品板块 -->
        <section class="section">
          <h2>畅销商品</h2>
          <!-- 手机列表容器 -->
          <div class="phone-list">
            <!-- 遍历评分最高的前5个手机，生成商品卡片 -->
            <div 
              v-for="phone in phones.slice().sort((a,b) => b.rating - a.rating).slice(0,5)" 
              :key="phone.id"
              class="phone-card"
              @click="showPhoneDetail(phone.id)"
            >
              <!-- 手机图片 -->
              <img :src="phone.image" :alt="phone.model" />
              <!-- 手机型号 -->
              <h3>{{ phone.model }}</h3>
              <!-- 手机价格 -->
              <p>价格: ¥{{ phone.price }}</p>
              <!-- 手机评分 -->
              <p>评分: {{ phone.rating }}/5</p>
            </div>
          </div>
        </section>
      </div>

      <!-- 搜索状态：显示搜索结果 -->
      <div v-else-if="currentState === 'search'" class="search-state">
        <!-- 搜索结果容器 -->
        <div class="search-results">
          <!-- 如果有搜索结果，显示手机列表 -->
          <div v-if="filteredPhones.length > 0" class="phone-list">
            <!-- 遍历搜索结果，生成商品卡片 -->
            <div 
              v-for="phone in filteredPhones" 
              :key="phone.id"
              class="phone-card"
              @click="showPhoneDetail(phone.id)"
            >
              <!-- 手机图片 -->
              <img :src="phone.image" :alt="phone.model" />
              <!-- 手机型号 -->
              <h3>{{ phone.model }}</h3>
              <!-- 手机品牌 -->
              <p>品牌: {{ phone.brand }}</p>
              <!-- 手机价格 -->
              <p>价格: ¥{{ phone.price }}</p>
              <!-- 手机成色 -->
              <p>成色: {{ phone.condition }}</p>
            </div>
          </div>
          <!-- 如果没有搜索结果，显示提示信息 -->
          <div v-else class="no-results">
            <p>没有找到匹配的商品</p>
          </div>
        </div>
      </div>

      <!-- 商品详情状态：显示品牌分类和对应品牌的手机列表 -->
      <div v-else-if="currentState === 'item'" class="item-state">
        <!-- 手机详情容器 -->
        <div class="phone-details">
          <!-- 品牌标签栏 -->
          <div class="brand-tabs">
            <!-- 遍历品牌列表，生成品牌标签按钮 -->
            <button 
              v-for="brand in brands" 
              :key="brand"
              @click="activeBrand = brand"
              :class="{ active: activeBrand === brand }"
            >
              <!-- 品牌名称 -->
              {{ brand }}
            </button>
          </div>

          <!-- 手机列表容器 -->
          <div class="phone-list">
            <!-- 遍历当前选中品牌的手机，生成商品卡片 -->
            <div 
              v-for="phone in phones.filter(p => p.brand === activeBrand)" 
              :key="phone.id"
              class="phone-card"
              @click="showPhoneDetail(phone.id)"
            >
              <!-- 手机图片 -->
              <img :src="phone.image" :alt="phone.model" />
              <!-- 手机型号 -->
              <h3>{{ phone.model }}</h3>
              <!-- 手机价格 -->
              <p>价格: ¥{{ phone.price }}</p>
              <!-- 手机成色 -->
              <p>成色: {{ phone.condition }}</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<!-- 脚本部分 - 定义组件逻辑和数据 -->
<script setup>
// 从Vue引入ref和computed，用于响应式数据和计算属性
import { ref, computed } from 'vue'
// 从vue-router引入useRouter，用于路由跳转
import { useRouter } from 'vue-router'

// 定义当前页面状态，初始状态为首页
const currentState = ref('home') 
// 定义购物车商品列表，初始为空数组
const cartItems = ref([])

/**
 * 将手机添加到购物车
 * @param {Object} phone - 要添加到购物车的手机对象
 */
const addToCart = (phone) => {
  // 将手机对象添加到购物车列表中
  cartItems.value.push(phone)
}
// 定义搜索关键词，初始为空字符串
const searchQuery = ref('') 
// 获取路由实例，用于路由跳转
const router = useRouter()

/**
 * 处理搜索操作
 * 根据搜索关键词是否为空，切换页面状态为搜索状态或首页状态
 */
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 如果搜索关键词不为空，切换到搜索状态
    currentState.value = 'search'
  } else {
    // 如果搜索关键词为空，切换到首页状态
    currentState.value = 'home'
  }
}

/**
 * 计算属性，根据搜索关键词过滤手机列表
 * @returns {Array} - 过滤后的手机列表
 */


// `computed` 是 Vue 3 组合式 API 中的一个函数，用于创建计算属性。
// 计算属性是一种基于响应式依赖进行缓存的属性，只有当依赖项发生变化时，计算属性才会重新计算。
// 在这里，`filteredPhones` 是一个计算属性，它依赖于 `searchQuery` 和 `phones` 的值。
// 当 `searchQuery` 或 `phones` 发生变化时，`filteredPhones` 会自动重新计算，返回符合搜索条件的手机列表。
const filteredPhones = computed(() => {
// 将搜索关键词转换为小写并去除首尾空格，方便后续进行不区分大小写且忽略前后空格的搜索匹配
const query = searchQuery.value.toLowerCase().trim()
// 检查处理后的搜索关键词是否为空，如果为空则直接返回全部手机数据，即不进行过滤操作
if (!query) return phones.value
  
  // 根据搜索关键词过滤手机列表，匹配手机型号或品牌
// 过滤 phones 数组中的手机对象，返回符合搜索条件的手机列表。
// 搜索条件为：手机型号或品牌包含转换为小写后的搜索关键词。
// 使用 toLowerCase() 方法将手机型号和品牌转换为小写，确保搜索不区分大小写。
// 使用 includes() 方法检查是否包含搜索关键词。
return phones.value.filter(phone => 
  // 检查手机型号是否包含搜索关键词
  phone.model.toLowerCase().includes(query) || 
  // 检查手机品牌是否包含搜索关键词
  phone.brand.toLowerCase().includes(query)
)
})

/**
 * 显示商品详情页面
 * 点击商品卡片时，跳转到对应的商品详情页面
 * @param {number} phoneId - 要显示详情的手机ID
 */
const showPhoneDetail = (phoneId) => {
  // 跳转到商品详情页面，路径包含手机ID
  router.push(`/item/${phoneId}`)
}

// 定义手机品牌列表
const brands = ref(['苹果', '华为', '小米', 'OPPO', 'vivo'])
// 定义当前选中的品牌，初始为苹果
const activeBrand = ref('苹果')

// 模拟手机数据，实际开发中应从API获取
const phones = ref([
  {
    id: 1,
    brand: '苹果',
    model: 'iPhone 13',
    price: 3999,
    image: 'https://example.com/iphone13.jpg',
    condition: '95新',
    stock: 10,
    rating: 4.8,
    description: 'A15仿生芯片，超视网膜XDR显示屏，5G网络',
    specs: '6.1英寸 OLED, 128GB存储, 双摄像头',
    warranty: '官方保修剩余3个月'
  },
  {
    id: 2,
    brand: '华为',
    model: 'Mate 40 Pro',
    price: 3499,
    image: 'https://example.com/mate40.jpg',
    condition: '9成新',
    stock: 5,
    rating: 4.8,
    description: '麒麟9000芯片，超感知徕卡电影影像系统',
    specs: '6.76英寸 OLED, 256GB存储, 三摄像头',
    warranty: '无官方保修'
  },
  {
    id: 3,
    brand: '小米',
    model: 'Redmi K60',
    price: 2499,
    image: 'https://example.com/redmi.jpg',
    condition: '全新',
    stock: 15,
    rating: 4.5,
    description: '骁龙8+ Gen1处理器，2K高光屏',
    specs: '6.67英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修1年'
  },
  {
    id: 4,
    brand: 'OPPO',
    model: 'Find X5',
    price: 2999,
    image: 'https://example.com/oppo.jpg',
    condition: '98新',
    stock: 8,
    rating: 4.7,
    description: '马里亚纳X影像芯片，哈苏手机影像系统',
    specs: '6.55英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修剩余6个月'
  },
  {
    id: 5,
    brand: 'vivo',
    model: 'X90 Pro',
    price: 3799,
    image: 'https://example.com/vivo.jpg',
    condition: '95新',
    stock: 3,
    rating: 4.9,
    description: '天玑9200芯片，蔡司一英寸T*主摄',
    specs: '6.78英寸 AMOLED, 256GB存储, 三摄像头',
    warranty: '官方保修剩余9个月'
  }
])
</script>

<!-- 样式部分 - 定义组件样式 -->
<style scoped>
/* 主导航栏样式 */
/* 主导航栏样式 */
.main-nav {
  /* 使用弹性布局，使导航项水平排列 */
  display: flex;
  /* 导航项之间的间距为20px */
  gap: 20px;
  /* 导航栏内边距为20px */
  padding: 20px;
  /* 设置导航栏背景为从左上方到右下方的渐变颜色 */
  background: linear-gradient(135deg, #1e5799 0%,#207cca 51%,#2989d8 100%);
  /* 导航栏底部外边距为30px */
  margin-bottom: 30px;
  /* 为导航栏添加阴影效果，增强立体感 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
/* 主导航栏链接样式 */
.main-nav a {
  /* 去除链接的下划线 */
  text-decoration: none;
  /* 链接文字颜色为白色 */
  color: white;
  /* 链接文字字体粗细为500 */
  font-weight: 500;
  /* 链接的所有样式变化在0.3秒内以缓动效果完成 */
  transition: all 0.3s ease;
}
/* 导航按钮样式 */
.nav-button {
  /* 将导航按钮靠右对齐 */
  margin-left: auto;
  /* 按钮内边距，上下8px，左右16px */
  padding: 8px 16px;
  /* 按钮背景颜色为#ff6b6b */
  background: #ff6b6b;
  /* 按钮文字颜色为白色 */
  color: white;
  /* 按钮边框圆角为4px */
  border-radius: 4px;
  /* 按钮的所有样式变化在0.3秒内以缓动效果完成 */
  transition: all 0.3s ease;
}
/* 导航按钮悬停样式 */
.nav-button:hover {
  /* 鼠标悬停时，按钮向上移动2px */
  transform: translateY(-2px);
  /* 鼠标悬停时，为按钮添加更深的阴影效果 */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* 主导航栏激活链接样式 */
.main-nav a.router-link-active {
  /* 激活链接的文字颜色为#ffcc5c */
  color: #ffcc5c;
  /* 激活链接的文字加粗 */
  font-weight: bold;
}
/* 主页容器样式 */
.home-container {
  /* 主页容器最大宽度为1400px */
  max-width: 1400px;
  /* 主页容器水平居中 */
  margin: 0 auto;
  /* 主页容器内边距为20px */
  padding: 20px;
  /* 主页容器内文字字体 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 头部样式 */
.header {
  /* 使用弹性布局，使头部元素水平排列 */
  display: flex;
  /* 头部元素在水平方向上两端对齐 */
  justify-content: space-between;
  /* 头部元素在垂直方向上居中对齐 */
  align-items: center;
  /* 头部底部外边距为40px */
  margin-bottom: 40px;
  /* 头部上下内边距为20px，左右无内边距 */
  padding: 20px 0;
  /* 头部底部添加1px的灰色边框 */
  border-bottom: 1px solid #eee;
}
/* 头部标题样式 */
.header h1 {
  /* 头部标题字体大小为2.5rem */
  font-size: 2.5rem;
  /* 头部标题文字颜色为#2c3e50 */
  color: #2c3e50;
  /* 去除标题的默认外边距 */
  margin: 0;
}
/* 搜索框区域样式 */
.search-bar {
  /* 使用弹性布局，使搜索框和按钮水平排列 */
  display: flex;
  /* 搜索框和按钮之间的间距为10px */
  gap: 10px;
}
/* 搜索框输入框样式 */
.search-bar input {
  /* 输入框内边距，上下10px，左右15px */
  padding: 10px 15px;
  /* 输入框边框为1px的灰色边框 */
  border: 1px solid #ddd;
  /* 输入框边框圆角为4px */
  border-radius: 4px;
  /* 输入框最小宽度为300px */
  min-width: 300px;
}
/* 搜索框按钮样式 */
.search-bar button {
  /* 按钮内边距，上下10px，左右20px */
  padding: 10px 20px;
  /* 按钮背景颜色为#42b983 */
  background: #42b983;
  /* 按钮文字颜色为白色 */
  color: white;
  /* 去除按钮边框 */
  border: none;
  /* 按钮边框圆角为4px */
  border-radius: 4px;
  /* 鼠标悬停在按钮上时显示为手型 */
  cursor: pointer;
  /* 按钮的所有样式变化在0.3秒内以缓动效果完成 */
  transition: all 0.3s ease;
}
/* 搜索框按钮悬停样式 */
.search-bar button:hover {
  /* 鼠标悬停时，按钮背景颜色变为#3aa876 */
  background: #3aa876;
  /* 鼠标悬停时，按钮向上移动2px */
  transform: translateY(-2px);
}
/* 主要内容区域样式 */
.main-content {
  /* 主要内容区域最小高度为500px */
  min-height: 500px;
}
/* 板块样式 */
.section {
  /* 板块底部外边距为50px */
  margin-bottom: 50px;
}
/* 板块标题样式 */
.section h2 {
  /* 板块标题字体大小为1.8rem */
  font-size: 1.8rem;
  /* 板块标题文字颜色为#2c3e50 */
  color: #2c3e50;
  /* 板块标题底部外边距为20px */
  margin-bottom: 20px;
  /* 板块标题底部内边距为10px */
  padding-bottom: 10px;
  /* 板块标题底部添加2px的灰色边框 */
  border-bottom: 2px solid #eee;
}
/* 手机列表样式 */
.phone-list {
  /* 使用网格布局 */
  display: grid;
  /* 网格列自动填充，每列最小宽度为250px，最大宽度为1fr */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 网格项之间的间距为30px */
  gap: 30px;
}
/* 手机卡片样式 */
.phone-card {
  /* 手机卡片背景颜色为白色 */
  background: white;
  /* 手机卡片边框圆角为8px */
  border-radius: 8px;
  /* 隐藏溢出卡片的内容 */
  overflow: hidden;
  /* 为手机卡片添加阴影效果，增强立体感 */
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  /* 手机卡片的所有样式变化在0.3秒内以缓动效果完成 */
  transition: all 0.3s ease;
  /* 鼠标悬停在卡片上时显示为手型 */
  cursor: pointer;
}
/* 手机卡片悬停样式 */
.phone-card:hover {
  /* 鼠标悬停时，手机卡片向上移动5px */
  transform: translateY(-5px);
  /* 鼠标悬停时，为手机卡片添加更深的阴影效果 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* 手机卡片图片样式 */
.phone-card img {
  /* 图片宽度占满卡片 */
  width: 100%;
  /* 图片高度固定为200px */
  height: 200px;
  /* 图片填充方式为覆盖，保持比例并裁剪 */
  object-fit: cover;
}
/* 手机卡片标题样式 */
.phone-card h3 {
  /* 标题外边距，上15px，左右15px，下5px */
  margin: 15px 15px 5px;
  /* 标题文字颜色为#2c3e50 */
  color: #2c3e50;
}
/* 手机卡片段落样式 */
.phone-card p {
  /* 段落外边距，上5px，左右15px，下15px */
  margin: 5px 15px 15px;
  /* 段落文字颜色为#7f8c8d */
  color: #7f8c8d;
}
/* 品牌标签栏样式 */
.brand-tabs {
  /* 使用弹性布局，使品牌标签按钮水平排列 */
  display: flex;
  /* 品牌标签按钮之间的间距为10px */
  gap: 10px;
  /* 品牌标签栏底部外边距为20px */
  margin-bottom: 20px;
}
/* 品牌标签按钮样式 */
.brand-tabs button {
  /* 按钮内边距，上下8px，左右16px */
  padding: 8px 16px;
  /* 按钮背景颜色为#eee */
  background: #eee;
  /* 去除按钮边框 */
  border: none;
  /* 按钮边框圆角为4px */
  border-radius: 4px;
  /* 鼠标悬停在按钮上时显示为手型 */
  cursor: pointer;
  /* 按钮的所有样式变化在0.3秒内以缓动效果完成 */
  transition: all 0.3s ease;
}
/* 激活的品牌标签按钮样式 */
.brand-tabs button.active {
  /* 激活按钮背景颜色为#42b983 */
  background: #42b983;
  /* 激活按钮文字颜色为白色 */
  color: white;
}
/* 品牌标签按钮悬停样式 */
.brand-tabs button:hover {
  /* 鼠标悬停时，按钮背景颜色变为#ddd */
  background: #ddd;
}
</style>